<template>
  <div id="VideoHome">
        <!-- 头部 -->
        <div class="header">
            <!-- <img src="/static/images/LOGO.png"> -->
        </div>
        <!-- 侧边栏 -->
        <button type="button" class="el-button el-button--default is-circle in" @click="fold"><i class="el-icon-caret-top"></i></button>
        <button type="button" class="el-button el-button--default is-circle out" @click="unfold"><i class="el-icon-caret-bottom"></i></button>
        <div class="nav">
            <ul class="column">
                <li @click="gotoTop(170)">推荐</li>
                <li @click="gotoTop(710)">全部</li>
                <li @click="gotoTop(1270)">类别1</li>
                <li><a :href="uploadUrl" target="_blank" color="red">视频上传</a></li>
                <li>科普</li>
                <li>类别2</li>
                <li>类别3</li>
                <li>类别4</li>
            </ul>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            uploadUrl: "http://localhost:8081/#/upload"
        }
    },
    methods:{
        goBack(){
            $("html,body").animate({scrollTop:"0px"},500);
        },
        fold(){
            $(".in").hide();
            $(".out").show();
            $(".nav").stop().slideUp(500);
        },
        unfold(){
            $(".out").hide();
            $(".in").show();
            $(".nav").stop().slideDown(500);
        },
        gotoTop(top_val){
            $(document).scrollTop(top_val);
        },
    }
}
</script>

<style>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 头部 */
.header{
    width: 100%;
    height: 150px;
    margin-bottom: 30px;
    background-color: #909399;
}
.header img{
    width: 100%;
    height: 150px;
}

/* 导航栏 */
.nav{
    position: fixed;
    width: 60px;
    height: 400px;
    top: 220px;
    right: 5px;
    border-radius: 5px;
    border: 1px solid #ddd;
    background-color: #fff;
    user-select: none;
    z-index: 10;
}
.in,.out{
    position: fixed;
    top: 178px;
    right: 15px;
    /* cursor: pointer; */
}
.out{
    display: none;
}
.column{
    width: 100%;
    height: 390px;
    margin-top: 5px;
}
.column li{
    width: 100%;
    height: 30px;
    cursor: pointer;

    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
}
.column .column_active{
    background-color: #1890ff;
    color: #fff;
}
.column li:hover{
    background-color: #409eff;
    color: #fff;

    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
</style>